<template>
	<view class="pageBg">
		<view class="map">
			<map id="map" @regionchange="regionchange" :longitude="center.longitude" :latitude="center.latitude"
				:markers="marklist"></map>
			<view class="dim"></view>
		</view>
		<view class="jobWrapper">
			<ListFilters style="background: #fff;" otherFilterType="jobListType"></ListFilters>
			<view class="jobListWrapper">
				<jobItem v-for="(item,index) in joblist" :key="item.id" :item="item"></jobItem>
			</view>
		</view>
	</view>
</template>

<script>
	import http from '@/utils/http'
	import api from '@/api'
	import jobItem from '@/components/listItem/jobItem.vue'
	import ListFilters from '@/components/ListFilters.vue'
	import {
		DbToGc,
		gcToDb
	} from '@/utils/map.js'
	export default {
		name: 'Jobmap',
		components: {
			jobItem,
			ListFilters
		},
		data() {
			return {
				params: {
					keyword: '',
					south_west_lat: 0,
					south_west_lng: 0,
					north_east_lat: 0,
					north_east_lng: 0,
				},
				joblist: [],
				marklist: [],
				center: {},
				map: null
			}
		},
		created() {
			let map = DbToGc(this.$store.state.config.map_lat, this.$store.state.config.map_lng)
			this.center = {
				latitude: parseFloat(map.lat),
				longitude: parseFloat(map.lng)
			}
		},
		onReady() {
			this.map = uni.createMapContext('map', this)
			this.map.initMarkerCluster({
				enableDefaultStyle: true,
				zoomOnClick: false,
				gridSize: 60,
				success(res) {
					console.log(2222222222222, res)
				}
			})
			this.init()
		},
		mounted() {},
		methods: {
			init() {
				this.map.getRegion({
					success: res => {
						var {
							northeast,
							southwest
						} = res
						let mapSouthwest = gcToDb(southwest.latitude, southwest.longitude)
						let mapNortheast = gcToDb(northeast.latitude, northeast.longitude)
						this.params.south_west_lat = mapSouthwest.lat
						this.params.south_west_lng = mapSouthwest.lng
						this.params.north_east_lat = mapNortheast.lat
						this.params.north_east_lng = mapNortheast.lng
						if (mapSouthwest.lat > 0 || mapSouthwest.lng > 0 || mapNortheast.lat > 0 ||
							mapNortheast.lng > 0) {
							this.fetchData(true)
						}
					}
				})
				// this.map.getScale({
				// 	success(){}
				// })
			},
			regionchange() {
				this.init()
			},
			fetchData(init) {
				let marks = []
				this.marklist = []
				this.params.page = 1
				this.params.pagesize = 3
				http.get(api.mapsearch, this.params).then(res => {
					if (res.data.code == 200) {
						if (init) {
							marks = res.data.data.marks
							marks.forEach((item) => {
								let map = DbToGc(item.map_lat, item.map_lng)
								this.marklist.push({
									id: (item.id * 1),
									latitude: parseFloat(map.lat),
									longitude: parseFloat(map.lng),
									joinCluster: true
								})
							})
							console.log(this.marklist)
							this.map.addMarkers({
								markers: this.marklist,
								clear: true, //是否先清空地图上所有的marker
							})
							this.joblist = [...res.data.data.items]
						} else {
							this.joblist = this.joblist.concat(res.data.data.items)
						}
					}
				}).catch(() => {})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pageBg {
		position: relative;
		overflow: hidden;
	}

	.map {
		width: 100%;
		height: 1040rpx;
		position: relative;

		map {
			width: 100%;
			height: 100%;
		}

		.dim {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			height: 80rpx;
			filter: blur(30rpx)
		}
	}

	.jobWrapper {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		transform: translateY(50%);
		background: transparent;
		z-index: 99;

		.jobListWrapper {
			padding: 0 30rpx;
		}
	}
</style>
